/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 财务管理 => 开票管理
 *  */
import React, { useMemo, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import { Tabs } from 'antd';
import styles from './index.less';
import ReceiptTemplate from '@/components/_pages/Finance/Receipt/ReceiptTemplate';
import ReceiptTemplateWkd from '@/components/_pages/Finance/Receipt/ReceiptTemplateWkd';
import KbOpenPlatform from '@/components/_pages/Finance/Receipt/openPlatform';
import RedPoint from '@/components/_pages/red-point';

interface IndexType {
  winSize: string;
}

const TemplateAuditIndex = (props: IndexType) => {
  const { winSize } = props;
  const [activeKey, setActiveKey] = useState('wkd');
  const handleTabChange = (key: string) => setActiveKey(key);
  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);
  const tabList = useMemo(
    () => [
      {
        label: <RedPoint type='0'>微快递/全寄开票审核</RedPoint>,
        key: 'wkd',
        children: <ReceiptTemplateWkd activeKey={activeKey == 'wkd'} source='' />,
      },
      {
        label: <RedPoint type='1'>网点开票审核</RedPoint>,
        key: 'station',
        children: <ReceiptTemplate activeKey={activeKey == 'station'} />,
      },
      {
        label: <RedPoint type='2'>聚单客开票审核</RedPoint>,
        key: 'jdk',
        children: <ReceiptTemplateWkd activeKey={activeKey == 'jdk'} source='jdk' />,
      },
      {
        label: <RedPoint type='3'>开放平台开票审核</RedPoint>,
        key: 'openPlatform',
        children: <KbOpenPlatform />,
      },
    ],
    [activeKey, screenSize],
  );

  return (
    <PageContainer className={styles.main}>
      <Tabs items={tabList} onChange={handleTabChange} type='card' activeKey={activeKey}></Tabs>
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(TemplateAuditIndex));
